<template>
  <div v-loading="loading">
    <el-card :body-style="{padding:'10px'}" style="min-height: 680px;background-color: #f3f3f3">
      <!-------------------------------按钮 ----------------------down------------------->
      <el-row :gutter="24">
        <el-col :span="21">
          <el-button type="info" @click="form={ }">新建</el-button>
          <el-button type="primary" @click="editVisible=true">选择单据</el-button>
          <el-button type="success" @click="saveEdit">保存</el-button>
        </el-col>
        <el-col :span="3">
          <el-button-group>
            <el-button type="primary" icon="el-icon-arrow-left" @click="toLast" />
            <el-button type="primary" icon="el-icon-arrow-right" @click="toNext" />
          </el-button-group>
        </el-col>
      </el-row>
      <!------------------------------按钮 ----------------------up ------------------->
      <!------------------------------选择单据 ----------------------down------------------->
      <el-dialog :visible.sync="editVisible" width="85%" :close-on-click-modal="false">
        <el-row :gutter="20" style="margin: 10px">
          <el-col :span="4">
            <el-input v-model="query.ccode" placeholder="单号" />
          </el-col>
          <el-col :span="4">
            <el-input v-model="query.ccusname" placeholder="客户名称" />
          </el-col>
          <el-col :span="5">
            <el-date-picker
              v-model="query.sddate"
              align="right"
              type="date"
              placeholder="选择日期"
            />
          </el-col>
          <el-col :span="5">
            <el-date-picker
              v-model="query.eddate"
              align="right"
              type="date"
              placeholder="选择日期"
            />
          </el-col>
          <el-col :span="3">
            <el-button class="hand-btn" type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
          </el-col>
        </el-row>
        <el-table
          :data="page.content"
          tooltip-effect="dark"
          border
          style="width: 100%;"
          @row-click="selTable"
        >
          <el-table-column
            type="index"
            label="项次"
            width="50"
          />
          <el-table-column
            prop="cDLCode"
            label="单号"
          />
          <el-table-column
            prop="cCusName"
            label="客户名称"
          />
          <el-table-column
            prop="cDepName"
            label="部门名称"
          />
          <el-table-column
            prop="cInvName"
            label="产品名称"
          />
          <el-table-column
            prop="iQuantity"
            label="数量"
          />
          <el-table-column
            prop="dDate"
            label="日期"
          />
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="total, prev, pager, next"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="page.totalElements"
            @current-change="handlePageChange"
          />
        </div>
      </el-dialog>
      <!------------------------------选择单据 ----------------------up------------------>
      <!------------------------------填写质检数据 ----------------------down------------------>
      <el-descriptions border style="margin-bottom: 5px">
        <el-descriptions-item label="发货单号" label-style="width:8%" content-style="width:23%">{{ form.cdlcode }}</el-descriptions-item>
        <el-descriptions-item label="客户名称" label-style="width:8%" content-style="width:23%">{{ form.ccusname }}</el-descriptions-item>
        <el-descriptions-item label="出库数量" label-style="width:8%" content-style="width:23%">{{ form.iqty }}</el-descriptions-item>
        <el-descriptions-item label="产品编码" label-style="width:8%" content-style="width:23%">{{ form.cinvcode }}</el-descriptions-item>
        <el-descriptions-item label="产品名称" label-style="width:8%" content-style="width:23%">{{ form.cinvname }}</el-descriptions-item>
        <el-descriptions-item label="产品规格" label-style="width:8%" content-style="width:23%">{{ form.cinvstd }}</el-descriptions-item>
        <el-descriptions-item label="受理日期" label-style="width:8%" content-style="width:23%">
          <el-date-picker
            v-model="form.acceptDate"
            type="date"
            format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-descriptions-item>
        <el-descriptions-item label="结案日期" label-style="width:8%" content-style="width:23%">
          <el-date-picker
            v-model="form.endlinedate"
            type="date"
            format="yyyy-MM-dd"
            placeholder="选择日期"
          />
        </el-descriptions-item>
      </el-descriptions>
      <!-------------------------------按钮 ----------------------up ------------------->
      <el-card style="min-height: 500px">
        <div class="cborder" style="font-weight: bold;text-align: center;">
          质检内容
        </div>
        <div style="display: flex">
          <div class="cborder" style="width: 10%;font-weight: bold;">
            <div>客户投诉</div>
            <div>内容描述</div>
          </div>
          <div class="cborder" style="width: 80%">
            <div style="margin-bottom: 10px"><el-input v-model="form.describe" type="textarea" style="width: 90%" placeholder="内容描述：" /></div>
            <el-checkbox-group v-model="checkComplantItems">
              <el-checkbox v-for="(item,index) in complantItems" :key="index" :label="item.id">{{ index }}.{{ item.info }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="cborder" style="width: 10%;text-align: center">
            <div style="color: #1890ff;">{{ form.describeBy }}</div>
            <hr/>
            <div>市场经理</div>
          </div>
        </div>

        <div style="display: flex">
          <div class="cborder" style="width: 10%;font-weight: bold;">
            <div style="align-self: center">原因调查</div>
          </div>
          <div class="cborder" style="width: 80%">
            <div style="margin-bottom: 10px"><el-input v-model="form.reason" type="textarea" style="width: 90%" placeholder="原因调查：" /></div>
          </div>
          <div class="cborder" style="width: 10%;text-align: center">
            <div style="color: #1890ff;">{{ form.reasonBy }}</div>
            <hr/>
            <div>责任部门</div>
          </div>
        </div>

        <div style="display: flex">
          <div class="cborder" style="width: 10%;font-weight: bold;">
            <div style="align-self: center">改善对策</div>
          </div>
          <div class="cborder" style="width: 80%">
            <div style="margin-bottom: 10px"><el-input v-model="form.countermeasure" type="textarea" style="width: 90%" placeholder="改善对策：" /></div>
          </div>
          <div class="cborder" style="width: 10%;text-align: center">
            <div style="color: #1890ff;">{{ form.countermeasureBy }}</div>
            <hr/>
            <div>责任部门经理</div>
          </div>
        </div>

        <div style="display: flex">
          <div class="cborder" style="width: 10%;font-weight: bold;">
            <div style="align-self: center">效果确定</div>
          </div>
          <div class="cborder" style="width: 80%">
            <div style="margin-bottom: 10px"><el-input v-model="form.result" type="textarea" style="width: 90%" placeholder="具体描述：" /></div>
          </div>
          <div class="cborder" style="width: 10%;text-align: center">
            <div style="color: #1890ff;">{{ form.resultBy }}</div>
            <hr/>
            <div>确认人</div>
          </div>
        </div>
      </el-card>
    </el-card>
  </div>
</template>
<script>
import { save } from '@/api/complaint'
import { list } from '@/api/complaintitem'
import { u8query } from '@/api/outcome'
import { get as getComplaint } from '@/api/complaint'
import { getNext } from '@/api/complaint'
import { getLast } from '@/api/complaint'
export default {
  name: 'ComplaintEdit',
  data() {
    return {
      rules: {
        acceptDate: [{ required: true, message: '受理日期不能为空' }],
        endlinedate: [{ required: true, message: '结案日期不能为空' }]
      },
      loading: false,
      filList: [],
      fileURL: process.env.VUE_APP_BASE_API,
      fileUploadURL: process.env.VUE_APP_BASE_API + 'file/upload',
      fileList: [],
      file: '',
      dialogVisible: false,
      dialogImageUrl: '',
      editVisible: false,
      quality: { },
      query: {},
      page: {},
      form: {},
      checkComplantItems: [],
      complantItems: []
    }
  },
  created() {
    this.getComplaintItems()
    if (this.$route.query.id) { this.getOutCome(this.$route.query.id) }
    this.handleSearch()
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getOutCome(id) {
      this.loading = true
      getComplaint(id).then(res => {
        this.loading = false
        this.form = res.data.data
        this.checkComplantItems = []
        if (this.form.entitys) {
          for (const ent of this.form.entitys) {
            this.checkComplantItems.push(ent.itemId)
          }
        }
      })
    },
    getComplaintItems() {
      this.loading = true
      list().then(res => {
        this.loading = false
        this.complantItems = res.data.list
      })
    },
    goBack() {
      this.$router.back()
    },
    saveEdit() {
      const entitys = []
      for (const item of this.checkComplantItems) {
        for (const ent of this.complantItems) {
          if (item === ent.id) {
            const entity = { itemId: ent.id, info: ent.info }
            entitys.push(entity)
          }
        }
      }
      this.form.entitys = entitys
      if (!this.form.acceptDate) {
        this.$message.warning('请选择受理日期')
        return
      }
      if (!this.form.endlinedate) {
        this.$message.warning('请选择结案日期')
        return
      }
      if (!this.form.describe) {
        this.$message.warning('请填写内容描述')
        return
      }
      if (this.form.cdlcode) {
        this.loading = true
        save(this.form).then(res => {
          this.loading = false
          this.$message.success(res.message)
          this.$router.push({ query: { id: res.data.data.id }})
          if (this.$route.query.id) {
            this.getOutCome(this.$route.query.id)
          }
        })
      } else {
        this.$message.warning('请选择单据')
      }
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'pageIndex', 1)
      this.getData()
    },
    getData() {
      u8query(this.query).then(res => {
        this.page = res.data.page
      })
    },
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val)
      this.getData()
    },
    selTable(row) {
      const target = { 'cdlcode': row.cDLCode, 'ddate': row.dDate, 'cdepcode': row.cDepCode, 'cdepname': row.cDepName,
        'ccuscode': row.cCusCode, 'ccusname': row.cCusName, 'cinvcode': row.cInvCode, 'cinvname': row.cInvName,
        'cinvstd': row.cInvStd, 'iqty': row.iQuantity }
      this.form = target
      this.editVisible = false
    },
    toNext() {
      getNext(this.$route.query.id).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getOutCome(this.$route.query.id)
        }
      })
    },
    toLast() {
      getLast(this.$route.query.id).then(res => {
        this.$router.push({ query: { id: res.data.data }})
        if (this.$route.query.id) {
          this.getOutCome(this.$route.query.id)
        }
      })
    }
  }
}
</script>

<style scoped>
  .handle-box {
    margin: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    margin: 10px;
    width: 300px;
    display: inline-block;
  }
  .table {
    width: 100%;
    font-size: 14px;
  }
  .red {
    color: #ff0000;
  }
  .hand-btn {
    margin: 5px;
  }
  .cborder{
    padding: 20px;
    border-collapse:collapse;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(69, 77, 86, 0.18);
    border-radius: 2px;
  }
</style>
